<template>
  <!-- @getParmas="getList" -->
  <el-input
    placeholder="请输入"
    v-model="values"
    readonly
    @click.stop="showDialog"
  >
    <template #suffix>
      <el-icon><ArrowDown /></el-icon>
    </template>
  </el-input>
  <div>
    <ComDialog v-model="dialogVisible" :title="title" :width="dialogWidth">
      <TableV2
        ref="tableV2Ref"
       :selectTypeMultiple="multiple"
        :selection="true"
        clickSelectRow
        :tableOptions="{
          border: true,
          height: 400,
        }"
        :apiFunction="list"
        :filter="filters"
        :columns="state.columnData"
       
        @selection-change="handleselectionChangeRow"
      >
        <template #tableHeader>
          <div class="jcb aic w100">
            <el-button type="primary" @click="handleAdd">新增计量表</el-button>
          </div>
        </template>
      </TableV2>
      <AddOrEdit v-model="addEditDrawer" :id="meterId" @update="getList" />
      <template #footer>
        <div>
          <el-button size="large" @click="handleClose">取消</el-button>
          <el-button size="large" type="primary" @click="submitData"
            >保存</el-button
          >
        </div>
      </template>
    </ComDialog>
  </div>
</template>

<script setup lang="tsx" name="selectRecipeCategory">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick,
  computed,
  toRaw,
  shallowRef,
} from "vue";
import { deletes, list, Info } from "../api";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { AddOrEdit } from "./index";
import Column from "/@ts/components/table/Column";
import { useI18n } from "vue-i18n";
import { columns } from "../data";
import { dialogWidth } from "/@ts/enums/sizeEnum";
const dialogVisible = shallowRef(false);
const values = ref("");
const emit = defineEmits(["update:modelValue","change"]);
const props = defineProps({
  modelValue: {
    type: [String],
    default: "",
  },

  placeholder: {
    type: String,
    required: true,
    default: "请选择",
  },
  title: {
    type: String,
    default: "请选择",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  pageInfo: {
    type: Object,
    default: null,
  },
  options: {
    type: Object,
    default: () => ({ label: "tplName", value: "tplId" }),
  },
  filter: {
    type: Object,
    default: () => ({}),
  },
});
const { t } = useI18n();
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      Info(val).then((res: ResponseConfig) => {
        values.value = res.data[props.options.label];
      });
    }else{
      values.value = ""
    }
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  dialogVisible.value = false;
};
const tableData = ref([]);

const filters = computed(() => {
  return toRaw(props.filter);
});
const meterId = shallowRef("");
const handleEdit = (row: any) => {
  addEditDrawer.value = true;
  meterId.value = row.meterId;
};

const addEditDrawer = shallowRef(false);

const tableV2Ref = ref();

const showDialog = () => {
  dialogVisible.value = true;
};

const state: any = reactive({
  height: 0,
  columnData: columns,
});

const handleAdd = () => {
  meterId.value = "";
  addEditDrawer.value = true;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};

const getList = (param?: any) => {
  tableV2Ref.value.getList();
};
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    "此操作将永久删除 " + row.meterName + " 数据, 是否继续?",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      deletes(row.meterId).then((res: ResponseConfig) => {
        if (res.code == 200) {
          ElMessage.success(t("表单提交.删除成功"));
          getList();
        }
      });
    })
    .catch(() => {});
};
const selection = ref([]);
const handleselectionChangeRow = (rows: any) => {
      selection.value = rows;
      console.log('selection :>> ', selection);
};
const submitData = () => {
  if (props.multiple) {
    if (selection.value.length == 0) {
      ElMessage.warning("请选择数据");
      return;
    } else {
      values.value = selection.value
        .map((item: any) =>{
         
          return  item[props.options.label]
        })
        .join(",");
      emit(
        "update:modelValue",
        selection.value.map((item: any) => item[props.options.value])
      );
      emit("change",selection.value.map((item: any) => item[props.options.value]),selection.value)
    }
  } else {
    if (selection.value.length == 0) {
      ElMessage.warning("请选择数据");
      return;
    } else {
      values.value = selection.value[props.options.label];
      emit("update:modelValue", selection.value[props.options.value]);
       emit("change",selection.value[props.options.value],selection.value)
    }
  }
  //
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss"></style>
